<template>
  <new-transfer
    filterable
    class="agentTransfer"
    size="mini"
    :titles="['未选人员', '已选人员']"
    :button-texts="['移除', '添加']"
    filter-placeholder="搜索座席成员"
    v-model="agents"
    leftcustomFilter
    :custom-filter-method="filterMethod"
    :data="userList"
  >
    <template v-slot:leftCustomFilter>
      <div style="display: flex; align-items: center">
        <el-input
          v-model="search.word"
          clearable
          placeholder="座席"
          style="margin: 15px 10px; flex: 1"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-cascader
          :clearable="true"
          size="small"
          class="agentCascader"
          style="flex: 1; margin-right: 10px"
          v-model="search.dept"
          :options="departmentTree"
          :props="{
            multiple: true,
            checkStrictly: true,
            label: 'name',
            value: '_id',
            emitPath: false,
          }"
          :show-all-levels="false"
          :collapse-tags="true"
          placeholder="部门"
        >
        </el-cascader>
      </div>
    </template>
    <span slot-scope="{ option }">
      <span class="label">{{ option.label }}</span>
    </span>
  </new-transfer>
</template>

<script lang="ts">
/**
 * 带部门搜索的穿梭框组件，用来选择座席
 * 设置数据 ref.setData
 * 获取数据 ref.getData
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import { deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
import NewTransfer from '@/components/V7transfer/index.vue'
@Component({
  name: 'AgentTransfer',
  components: { NewTransfer }
})
export default class AgentTransfer extends Vue {
  private agents: any = []
  private search = {
    dept: [],
    word: ''
  }

  // 获取部门树型数据
  get departmentTree () {
    return (CommonModule as any).publicCache.departmentTree.tree
  }

  // 获取座席
  get userList () {
    const agents = deepClone(CommonModule.publicCache.userListObj)
    const agentsArr: any = []
    for (const i in agents) {
      agentsArr.push({ key: agents[i]._id, label: agents[i].name, department: agents[i].departmentConfig ? agents[i].departmentConfig.departmentIdList : [] })
    }
    return agentsArr
  }

  // 自定义搜索
  private filterMethod (query: any, item: any) {
    if (this.search.dept.length > 0) {
      return item.label.indexOf(this.search.word) > -1 && this.search.dept.some(v => item.department.includes(v))
    } else {
      return item.label.indexOf(this.search.word) > -1
    }
  }

  // 初始化数据
  private setData (data) {
    this.agents = data
  }

  // 获取数据
  private getData () {
    return deepClone(this.agents)
  }
}
</script>

<style lang="stylus" scoped>
.agentTransfer
  display flex
  /deep/ .el-transfer-panel
    flex 1
  /deep/ .el-transfer__buttons
    margin auto
.agentCascader
  /deep/ .el-cascader__tags
    right 70px
    flex-wrap nowrap
</style>
